focus event

Categories: Events > Form Events | Forms
Bind an event handler to the "focus" event, or trigger that event on an element.

Contents:

.on( "focus" [, eventData ], handler )Returns: jQuery

Description: Bind an event handler to the "focus" event.

This page describes the focus event. For the deprecated .focus() method, see .focus().

  • The focus event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (<input>, <select>, etc.) and links (<a href>). In recent browser versions, the event can be extended to include all element types by explicitly setting the element's tabindex property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.
  • Elements with focus are usually highlighted in some way by the browser, for example with a dotted line surrounding the element. The focus is used to determine which element is the first to receive keyboard-related events.

Attempting to set focus to a hidden element causes an error in Internet Explorer. Take care to only use .trigger( "focus" ) on elements that are visible. To run an element's focus event handlers without setting focus to the element, use .triggerHandler( "focus" ) instead of .trigger( "focus" ).

For example, consider the HTML:

1
2
3
4
5
6
7
 
<form>
  <input id="target" type="text" value="Field 1">
  <input type="text" value="Field 2">
</form>
<div id="other">
  Trigger the handler
</div>

The event handler can be bound to the first input field:

1
2
3
 
$( "#target" ).on( "focus", function() {
  alert( "Handler for `focus` called." );
} );

Now clicking on the first field, or tabbing to it from another field, displays the alert:

Handler for `focus` called.

We can trigger the event when another element is clicked:

1
2
3
 
$( "#other" ).on( "click", function() {
  $( "#target" ).trigger( "focus" );
} );

After this code executes, clicks on Trigger the handler will also alert the message.

The focus event does not bubble. As of version 1.4.2, jQuery works around this limitation by mapping focus to the focusin event in its event delegation methods.

The native focus event is asynchronous in all versions of IE, contrary to other browsers. To avoid issues related to this discrepancy, as of jQuery 3.7.0, jQuery uses focusin as the native backing event for focus in IE.

Examples:

Fire focus.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>on demo</title>
  <style>
  span {
    display: none;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
</head>
<body>
 
<p><input type="text"> <span>focus fire</span></p>
<p><input type="password"> <span>focus fire</span></p>
 
<script>
$( "input" ).on( "focus", function() {
  $( this ).next( "span" ).css( "display", "inline" ).fadeOut( 1000 );
} );
</script>
 
</body>
</html>

Demo:

To stop people from writing in text input boxes, try:

1
2
3
 
$( "input[type=text]" ).on( "focus", function() {
  $( this ).trigger( "blur" );
} );

To focus on a login input box with id 'login' on page startup, try:

1
2
3
 
$( function() {
  $( "#login" ).trigger( "focus" );
} );